<template>
  <div class="payment">
    <van-nav-bar
      left-arrow
      title="确认付款"
      left-text="返回"
      @click-left="$router.back()"
    />
    <ul>
      <li>
        <van-icon name="gold-coin-o" />
        <section>
          <h6>
            商品金额：<span style="color: red">￥{{ params.price }}</span>
          </h6>
          <p>订单号: {{ params.orderNumber }}</p>
        </section>
        <i class="iconfont icon-xiangyoujiantou"></i>
      </li>
      <li>
        <van-icon name="location-o" />
        <section>
          <h6>{{ address.linkMan }} {{ address.mobile }}</h6>
          <p>{{ address.cityStr }} {{ address.provinceStr }} {{ address.address }}</p>
        </section>
        <i class="iconfont icon-xiangyoujiantou"></i>
      </li>
    </ul>
    <van-popup v-model:show="show">
      <div class="qrcode" ref="qrcodedom"></div>
    </van-popup>
    <van-button block type="danger" @click="pay">微信支付￥{{ params.price }}</van-button>
  </div>
</template>
<script>
import { useRoute } from "vue-router";
import { getAddress } from "../../api/second/index.js";
import { ref } from "vue";
import Qrcode from "qrcodejs2";
export default {
  setup(props) {
    const { params } = useRoute();
    const address = ref({});
    const show = ref(false);
    const qrcodedom = ref(null);
    getAddress({ token: localStorage.getItem("token") }).then((res) => {
      address.value = res.data;
    });
    const pay = () => {
      // 支付的事件
      show.value = true;
      //    setTimeout(() => {
      //       console.log(qrcodedom.value);
      //    }, 0);
      setTimeout(() => {
        new Qrcode(qrcodedom.value, {
          text: "http://www.usian.cn/index", // 二维码的内容
          width: 100, // 二维码的宽度
          height: 100, // 二维码的高度
          colorDark: "green", // 二维码的颜色
          colorLight: "#ffffff", // 二维码的底色
          correctLevel: Qrcode.CorrectLevel.H, // 二维码的容错率
        });
      }, 0);
    };
    return {
      address,
      params,
      show,
      qrcodedom,
      pay,
    };
  },
};
</script>
<style lang="scss" scoped>
.payment {
  background: #fff;
}
li {
  position: relative;
  display: flex;
  padding: 10px 25px;
  box-sizing: border-box;
  align-items: center;
  font-size: 14px;
  background: #fff;
  border-top: 1px solid #ccc;
  .van-icon-location-o,
  .van-icon-gold-coin-o {
    font-size: 20px;
    margin-right: 10px;
    color: red;
  }
  .van-icon-location-o {
    color: rgb(90, 159, 236);
  }
  section {
    flex: 1;
    p {
      color: grey;
      margin-top: 15px;
    }
  }
}
.van-button {
  position: fixed;
  left: 0;
  bottom: 0;
}
.qrcode {
  height: 100px;
  width: 100px;
  padding: 15px;
}
</style>
